
::v-deep .z-paging-content {
  transition: all 0.2s;
}

.page {
	width: 100%;
	height: 100vh;
	background-color: #F4F7FE;
	opacity: 0;
	
	// tabs
	.tab-box {
	  width: 100%;
	  // padding: 30rpx 24rpx;
	  box-sizing: border-box;
	
	  .tab-box-content {
	    width: 100%;
	    height: 80rpx;
	    background: #ffffff;
	    border-radius: 16rpx;
	    padding: 0 30rpx;
	    box-sizing: border-box;
		border-bottom: 2rpx solid #F4F7FE;
	  }
	}
	::v-deep .uv-tabs {
	  .uv-tabs__wrapper__nav__line {
	    bottom: 5rpx !important;
	  }
	}
	.content{
		width: 100%;
		margin: 30rpx 0;
		position: relative;
		z-index: 9;
		
		.statistics-box{
			width: 100%;
			
			.statistics-tips {
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  margin-bottom: 30rpx;
				
				.title {
					position: relative;
					font-size: 28rpx;
					color: #202123;
					font-weight: 500;
					height: 28rpx;
					line-height: 28rpx;
					padding-left: 15rpx;
					
					&::after{
						content: '';
						position: absolute;
						top: 2rpx;
						left: 0;
						width: 8rpx;
						height: 24rpx;
						border-radius: 6rpx;
						background-color: #3B75FF;
					}
				}
			}
			
			.item-box{
				width: calc(100% - 60rpx);
				padding: 30rpx;
				background-color: #fff;
				margin-bottom: 30rpx;
				
				&:last-child{
					margin-bottom: 0rpx;
				}
				
				.search-box {
				  display: flex;
				  align-items: center;
				  justify-content: flex-end;
				
				  .search-flex+.search-flex {
				    margin-left: 40rpx;
				  }
				
				  .search-flex {
				    display: flex;
				    align-items: center;
				  }
				 .mdtype{
					max-width: 130rpx;
					text-align: right;
					overflow: hidden;
					white-space: nowrap;
				 }
				 .rqtime{
					 max-width: 180rpx;
					 text-align: right;
					 overflow: hidden;
					 white-space: nowrap;
				 }
				  .search-label {
				    font-size: 26rpx;
				    color: #747474;
				    margin-right: 10rpx;
				  }
				
				}
			
				.card-box{
					margin-top: 20rpx;
					display: flex;
					
					.card-statistics+.card-statistics{
						margin-left: 30rpx;
					}
					.card-statistics{
						flex: 1;
						background: #3B75FF;
						border-radius: 16rpx;
						padding: 20rpx;
						position: relative;
						
						
						.card-bg{
							position: absolute;
							left: 0;
							bottom: 0;
							width: 100%;
							height: 40rpx;
						}
						.card-title {
							font-size: 26rpx;
							color: #C3D4FF;
							// font-weight: 600;
						}
						.card-number {
							margin-top: 15rpx;
							font-size: 40rpx;
							color: #fff;
							// font-weight: 500;
							display: flex;
							align-items: center;
					
							.card-icon{
								width: 37rpx;
								height: 37rpx;
								margin-right: 15rpx;
							}
						}
					}
				}
			
				.statistics-e{
					margin-top: 30rpx;
				}
				
				.state-box{
					display: flex;
					flex-wrap: wrap;
					
					.state-item{
						padding: 20rpx;
						width: calc( 33.3% - 44rpx);
						border-bottom: 2rpx solid #efefef;
						border-right: 2rpx solid #efefef;
						&:nth-child(1),
						&:nth-child(2),
						&:nth-child(3){
							border-top: 2rpx solid #efefef;
						}
						&:nth-child(1),
						&:nth-child(4),
						&:nth-child(7){
							border-left: 2rpx solid #efefef;
						}
						&:nth-child(1){
							.state-value{
								color: #044FFF;
							}
						}
						.state-label{
							font-size: 24rpx;
							color: #6c6c6c;
							text-align: center;
						}
						.state-value{
							margin-top: 10rpx;
							font-size: 48rpx;
							color: #6B97FF;
							text-align: center;
							font-weight: 500;
						}
					}
				}
			
				.card2-box{
					margin-top: 20rpx;
					display: flex;
					flex-wrap: wrap;
					
					.card-statistics{
						width: calc(50% - 56rpx);
						border-radius: 16rpx;
						padding: 20rpx;
						position: relative;
						margin-bottom: 20rpx;
						
						&:nth-child(2n){
							margin-left: 30rpx;
						}
						
						.card-bg{
							position: absolute;
							left: 0;
							bottom: 0;
							width: 100%;
							height: 80%;
						}
						.card-title {
							font-size: 26rpx;
							position: relative;
							z-index: 1;
							// font-weight: 600;
						}
						.card-number {
							margin-top: 15rpx;
							font-size: 40rpx;
							font-weight: 500;
							display: flex;
							align-items: center;
							position: relative;
							z-index: 1;
					
							.card-icon{
								width: 37rpx;
								height: 37rpx;
								margin-right: 15rpx;
							}
						}
					}
				}
							
			}
			
		}
	}
	
}

::v-deep .zb-table-applet .zb-table-header .item-th{
	color: #A6AAB8;
	background: #F5F7FA !important;
	border-bottom: unset !important;
}
::v-deep .zb-table-applet .item-td{
	color: #5C5F66;
	border-bottom: unset !important;
}
::v-deep .zb-table-footer{
	background: #ffffff !important;
	
	.zb-stick-side{
		background: #ffffff !important;
	}
	.item-th{
		color: #5C5F66;
		border-top: 1px solid #F5F7FA;
		border-bottom-color: #F5F7FA !important;
	}
}

.sort-box{
	::v-deep .zb-table-applet .zb-table-header .item-th{
		width: 33.3% !important;
	}
	::v-deep .zb-table-applet .item-td{
		width: 33.3% !important;
	}
	::v-deep .zb-table-footer .item-th{
		width: 33.3% !important;
	}
}